<template>
  <div>
    <div class="video-wrap">
      <div class="play-video">
        <video autoplay controls loop :src="videoingList[0].movieave" v-if="shows"></video>
        <p v-if="shows">{{videoingList[0].titlt}}</p>
      </div>
      <div class="list-video">
        <p>其他预告</p>
        <div class="other-video" v-for="(item, index) in videoingrander" @click="getvideo(item.id)">
          <img :src="item.imgava" />
          <p>{{item.titlt}}</p>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import footers from "../components/footer";
import { mapState } from "vuex";
export default {
  name: "Videos",
  data() {
    return {
      shows:false,
      videoingList:[],
      videoingrander:[]
    };
  },
  created(){
    // console.log(this.$store.state.video.videoing);
    // this.videoingList = this.$store.state.video.videoing
    console.log(this.$route.query.id);
    this.videolist(this.$route.query.id)

    this.videolistRandem()
  },
  mounted() {},
  methods: {
    videolist(id){
      this.$http.get('/movieids',{
        params:{
          id:id
        }
      }).then(res=>{
        // console.log(res.data);
        this.videoingList = res.data
        this.shows = true
      }).catch(err=>{
        console.log(err);
      })
    },
    // 随机查询列表ye
    videolistRandem(){
      let id = Math.floor(Math.random()*10)+1
      // console.log(id);
      this.$http.get('/moviepage',{
        params:{
          pno:id
        }
      }).then(res=>{
        // console.log(res.data);
        this.videoingrander = res.data
        // this.shows = true
      }).catch(err=>{
        console.log(err);
      })

    },
    getvideo(id){
      // console.log(id);
      this.videolist(id)
    }
  },
  components: {
    footers,
  },
  computed: {
    
  },
};
</script>

<style lang="scss" scoped>
.video-wrap {
  widows: 100%;
  height: 600px;
  background: #25272a;
  display: flex;
  justify-content: space-around;
  padding: 30px 50px;
  box-sizing: border-box;
  .play-video {
    width: 730px;
    height: 450px;
    video {
      width: 100%;
      height: 100%;
    }
    > p {
      color: #fff;
      font-size: 20px;
      margin-top: 20px;
    }
  }
  .list-video {
    overflow-y: scroll;
    width: 420px;
    height: 500px;
    background: #1a1b1d;
    > p {
      color: #fff;
      font-size: 15px;
      margin: 20px;
    }
    .other-video:hover p{
      color: #d31e1e;
    }
    .other-video {
      padding: 0 10px;
      box-sizing: border-box;
      width: 100%;
      height: 94px;
      /* background: #fff; */
      display: flex;
      align-items: center;
      margin: 5px 0;
      img {
        height: 85px;
        width: auto;
        margin-right: 10px;
      }
      > p {
        color: #fff;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
</style>
